<template>
    <div class="body">
        <div class="head">
            <div class="left">
                云汉购票系统客户端
            </div>
            <div class="right">
                <router-link to="/goupiao">
                    <div :class="[buttonNum === 1 ? 'buttonfocus' : 'button']" @click="toggleButton(1)">
                        <div class="butbox">
                            <img class="iconfont" src="../assets/img/goupiao.png">
                            <div style="display: inline-block;">门票购票</div>
                        </div>
                    </div>
                </router-link>

                <router-link to="/orderrefund">
                    <div :class="[buttonNum === 2 ? 'buttonfocus' : 'button']" @click="toggleButton(2)">
                        <div class="butbox">
                            <img class="iconfont" src="../assets/img/refund.png">
                            <div style="display: inline-block;">门票退票</div>
                        </div>
                    </div>
                </router-link>

                <router-link to="/hexiao">
                    <div :class="[buttonNum === 3 ? 'buttonfocus' : 'button']" @click="toggleButton(3)">
                        <div class="butbox">
                            <img class="iconfont" src="../assets/img/hexiao.png">
                            <div style="display: inline-block;">门票核销</div>
                        </div>
                    </div>
                </router-link>

                <router-link to="/verification">
                    <div :class="[buttonNum === 4 ? 'buttonfocus' : 'button']" @click="toggleButton(4)">
                        <div class="butbox">
                            <img class="iconfont" src="../assets/img/verification.png">
                            <div style="display: inline-block;">资质审核</div>
                        </div>
                    </div>
                </router-link>

                <router-link to="/print">
                    <div :class="[buttonNum === 5 ? 'buttonfocus' : 'button']" @click="toggleButton(5)">
                        <div class="butbox">
                            <img class="iconfont" src="../assets/img/print.png">
                            <div style="display: inline-block;">线上票打印</div>
                        </div>
                    </div>
                </router-link>

                <router-link to="/hexiaolist">
                    <div :class="[buttonNum === 6 ? 'buttonfocus' : 'button']" @click="toggleButton(6)">
                        <div class="butbox">
                            <img class="iconfont1" src="../assets/img/hexiaolist.png">
                            <div style="display: inline-block;">门票记录</div>
                        </div>
                    </div>
                </router-link>

                <router-link to="/order">
                    <div :class="[buttonNum === 7 ? 'buttonfocus' : 'button']" @click="toggleButton(7)">
                        <div class="butbox">
                            <img class="iconfont" src="../assets/img/order.png">
                            <div style="display: inline-block;">订单管理</div>
                        </div>
                    </div>
                </router-link>
       
            </div>
        </div>

        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <div class="content">
            <router-view></router-view>
        </div>

    </div>
</template>
  
<script setup>
    import { ref } from 'vue';
    // data
    const buttonNum = ref(1);

    const toggleButton = (num) => {
        buttonNum.value = num;
    };
</script>
  
<style lang='scss' scoped>
.body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    
    .iconfont{
        width: 32px;
        height: 32px;
    }
    .iconfont1{
        width: 36px;
        height: 32px;
    }

    .head {
        height: 74px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        border: 1px solid #000;
        background-color: #1c76f7;

        .left {
            flex: 1;
            margin-left: 20px;
            font-size: 50px;
            line-height: 74px;
            color: #fff;
        }

        .right {
            display: flex;

            .butbox{
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 18px;
            }

            .button {
                width: 170px;
                height: 72px;
                color: #fff;
            }

            .buttonfocus {
                width: 170px;
                height: 72px;
                color: #fff;
                background-color: #165cc0;
            }
        }
    }

    .content {
        flex: 1;
        // background-color: skyblue;
    }
}
</style>
  